<!DOCTYPE html>
<html>

<head>
    <title>My Awesome Signup Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
        integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
    <link href="https://fonts.font.im/css?family=Kaushan+Script" rel="stylesheet" />
    <link rel="stylesheet" href="./style/signup.css" />
</head>
<!--Coded with love by Mutiullah Samim-->

<body>
    <div class="container h-100">
        <div class="d-flex justify-content-center h-100">
            <div class="user_card">
                <div class="d-flex justify-content-center">
                    <div class="brand_logo_container">
                        <img src="https://iconsplace.com/wp-content/uploads/_icons/000000/256/png/death-star-icon-256.png"
                            class="brand_logo" alt="Logo" />
                        <div class="d-flex justify-content-center title">
                            <h3>Death Star</h3>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-center form_container">
                    <form action="api/user/register" method="POST" id="userform"
                        enctype="application/x-www-form-urlencoded">
                        <div class="input-group mb-3">
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                            </div>
                            <input type="text" name="first_name" class="form-control input_user"
                                placeholder="First Name" />
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                            </div>
                            <input type="text" name="last_name" class="form-control input_user"
                                placeholder="Last Name" />
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                            </div>
                            <input type="text" name="username" class="form-control input_user"
                                placeholder="User Name" />
                        </div>
                        <div class="input-group mb-2">
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fas fa-key"></i></span>
                            </div>
                            <input type="password" name="password" class="form-control input_pass "
                                placeholder="Password" />
                        </div>
                    </form>
                </div>
                <div class="d-flex justify-content-center mt-3 login_container">
                    <input type="submit" form="userform" name="signup" value="Sign Up" class="btn login_btn">
                </div>
                <div class="mt-4">
                    <div class="d-flex justify-content-center links">
                        <a href="./index.html">Login</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>